<template>

    <div class="stepsdemo-content">
        <Card>
            <template v-slot:title>
                个人信息
            </template>
            <template v-slot:subtitle>
                输入您的个人信息
            </template>
            <template v-slot:content>
                <div class="p-fluid">
                    <div class="p-field">
                        <label for="firstname">姓</label>
                        <InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" />
                        <small v-show="validationErrors.firstname && submitted" class="p-error">姓必须填写。</small>
                    </div>
                    <div class="p-field">
                        <label for="lastname">名</label>
                        <InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" />
                        <small v-show="validationErrors.lastname && submitted" class="p-error">名必须填写。</small>
                    </div>
                    <div class="p-field">
                        <label for="age">年龄</label>
                        <InputNumber id="age" v-model="age" />
                    </div>
                </div>
            </template>
            <template v-slot:footer>
                <div class="p-grid p-nogutter p-justify-between">
                    <i></i>
                    <Button label="下一步" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                </div>
            </template>
        </Card>
    </div>

</template>

<script>
    export default {
        data () {
            return {
                firstname: '',
                lastname: '',
                age: null,
                submitted: false,
                validationErrors: {}
            }
        },
        methods: {
            nextPage() {
                console.log('1');
                this.submitted = true;
                if (this.validateForm() ) {
                    console.log('2');
                    this.$emit('next-page', {formData: {firstname: this.firstname, lastname: this.lastname, age: this.age}, pageIndex: 0});
                    console.log('3');
                }
            },
            validateForm() {
                if (!this.firstname.trim())
                    this.validationErrors['firstname'] = true;
                else
                    delete this.validationErrors['firstname'];

                if (!this.lastname.trim())
                    this.validationErrors['lastname'] = true;
                else
                    delete this.validationErrors['lastname'];

                return !Object.keys(this.validationErrors).length;
            }
        }
    }

</script>